<template>
	<view class="container" :style="{background: 'url(' + arrayGet(data, 'backgroundImage') + ') no-repeat'}">
		<view class="header">
			<view class="status_bar"></view>
			<Header>我的</Header>
			<view class="main">
				<!-- 头像 -->
				<view class="p-l-r-32 flex" style="margin-bottom: 28rpx;">
					<view style="margin-right: 20rpx;">
						<u-avatar :src="arrayGet(data.userInfo, 'image.path_url')" size="44"></u-avatar>
					</view>
					<view class="userInfo">
						<text class="username">{{ arrayGet(data.userInfo, 'show_name') }}</text>
						<br />
						<image v-if="arrayGet(data.userInfo, 'member_certification_status') == 1"
							src="../../static/images/authentication.png" class="tag"></image>
					</view>
				</view>
				<view class="smegma">
				</view>
				<view class="ad-img" v-if="data.bannerLists.length>0">
					<u-swiper :display-multiple-items="arrayGet(data, 'bannerLists',[]).length"
						:list="arrayGet(data, 'bannerLists',[])" :height="106" :indicator="true"
						indicatorMode="line"></u-swiper>
				</view>
				<view class="p-l-r-32 list-item" @click="goNav('/pages/contract/purchase')">
					<view>
						<image src="../../static/images/File.png"></image>
						<text>次数：{{ arrayGet(data.userInfo, 'use_count') }}/{{ arrayGet(data.userInfo, 'count') }}</text>
					</view>
					<view>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
				<view class="p-l-r-32 list-item" @click="goCer">
					<view class="update">
						<image src="../../static/images/Successfully.png"></image>
						<text v-if="data.memberType == 'member'"> 升级成为企业用户</text>
						<text v-if="data.memberType == 'user'">{{ arrayGet(data.userInfo, 'company_name') }} · 管理员
						</text>
						<text v-if="data.memberType == 'admin'">{{ arrayGet(data.userInfo, 'show_name') }} · 员工</text>
					</view>
					<view v-if="data.memberType == 'member'">
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
				<view class="list">
					<u-cell-group titleStyle="font-size:32rpx;color:#000;">
						<view v-if="data.memberType == 'user'">
							<u-cell size="large" title="印章管理" isLink url="/pages/my/enterprise/seal/index"></u-cell>
							<!--              <u-cell size="large" title="成员管理" isLink url="/pages/my/member/index"></u-cell>-->
							<u-cell size="large" v-if="checkPermissions('contract-v1::contract-audit.handle')"
								title="审核管理" url="/pages/my/toexamine/index" isLink></u-cell>
						</view>
						<u-cell size="large" title="设置" isLink @click="goNav(pageUrl.userInfoUrl[userType])"></u-cell>
						<u-cell v-if="data.memberType == 'member'" size="large" title="实名认证"
							@click="goNav(pageUrl.realNameUrl[userType])" isLink></u-cell>
						<u-cell size="large" title="文件管理" isLink @click="goNav(pageUrl.common.fileUrl)"></u-cell>
						<u-cell size="large" title="单文件签署" isLink @click="goNav('/pages/contract/file-list')"></u-cell>
						<u-cell size="large" title="抄送管理" isLink @click="goNav('/pages/my/recipient/index')"></u-cell>
						<u-cell size="large" title="模板收藏" isLink @click="goNav(pageUrl.common.collectUrl)"></u-cell>
						<u-cell size="large" title="企业客服" isLink @click="toCustomerServicePages"></u-cell>
						<u-cell size="large" title="帮助中心" isLink @click="goNav('/pages/home/webview?type=help')"></u-cell>
						<!--            <u-cell size="large" title="消息通知" isLink url="/pages/my/message/index"></u-cell>-->
						<!--            <u-cell size="large" title="推广" url="/pages/my/promotion/index" isLink></u-cell>-->
						<!--            <u-cell size="large" title="申请合作" url="/pages/my/cooperate/index" isLink :border="false"></u-cell>-->
					</u-cell-group>
				</view>
			</view>
		</view>
		<Tabbar :current-page="4"></Tabbar>
	</view>
</template>
<script setup>
	import Header from "@/components/Header.vue"
	import {
		memberInfo,
		getEnterpriseInfo
	} from "../../api/module/mine.js";
	import {
		bannerList,
		background
	} from "../../api/module/home.js"
	import {
		reactive,
		ref
	} from "vue"
	import {
		onShow,
		onLoad
	} from "@dcloudio/uni-app";
	import {
		useStore
	} from 'vuex';
	import {
		arrayGet,
		arrayPluck,
		checkPermissions,
		goNav,
		msg,
		pageUrl
	} from "../../utils/common";
	const store = useStore()
	let userType = store.state.userType;
	const data = reactive({
		userInfo: {},
		bannerLists: [],
		getBackground: "",
		memberType: '',
	})
	onShow(() => {
		getUserInfo()
		getBannerList()
		getBackground();
		userType = store.state.userType
	})
	const goCer = () => {
		if (data.userInfo.member.certification_status != "1") {
			msg('您尚未实名认证，请实名认证后操作');
			return;
		}
		goNav('/pages/my/enterprise/authentication/index')
	}
	const getBannerList = () => {
		bannerList({
			platform: 'mini_program',
			position_type: 'center',
			source_type: 'jzb',
		}).then(res => {
			data.bannerLists = arrayPluck(res, 'image');
		}).catch(err => {
			console.log(err)
		})
	}
	const toCustomerServicePages = () => {
		try {
			wx.openCustomerServiceChat({
				extInfo: {
					url: "https://work.weixin.qq.com/kfid/kfca54481578e044192" //客服ID
				},
				corpId: 'wwe334e9444cdc5cf4', //企业微信ID
				success(res) {
					console.log(res, 1)
				},
				fail(err) {
					console.log(err, 2)
				}
			})
		} catch (error) {
			console.log(error)
			// showToast("请更新至微信最新版本")
		}
	}
	const getUserInfo = () => {
		if (store.state.userType == 1) {
			memberInfo().then(res => {
				data.userInfo = res
				data.memberType = arrayGet(res, 'member_type');
				console.log('个人', arrayGet(res, 'member_type'))
			}).catch(err => {
				console.log(err)
			})
		} else {
			getEnterpriseInfo().then(res => {
				data.userInfo = res
				data.memberType = arrayGet(res, 'member_type');
				console.log('企业', arrayGet(res, 'member_type'))
			}).catch(err => {
				console.log(err)
			})
		}
	}
	const getBackground = () => {
		background({
			position_type: 'center',
			platform: 'mini_program',
		}).then(res => {
			data.backgroundImage = arrayGet(res, 'setting_image_image.path_url');
		})
	}
</script>
<style lang="scss" scoped>
	.container {
		background-size: contain !important;
	}

	.header {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;

		.status_bar {
			height: var(--status-bar-height);
			width: 100%;
		}

		.status_title {
			height: 44px;
			padding: 0 16px;
			text-align: center;
			color: #fff;
			line-height: 44px;
		}
	}

	.ad {
		height: 212rpx;
		position: absolute;
		z-index: 1000;
		width: 100%;
		top: 150px;
	}

	.list-item {
		height: 96rpx;
		background: rgba(236, 242, 254, 0.6);
		border-radius: 8rpx;
		backdrop-filter: blur(2px);
		line-height: 96rpx;
		margin: 0 32rpx;
		margin-bottom: 24rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		text-align: center;

		image {
			width: 52rpx;
			height: 52rpx;
			margin-right: 18rpx;
			vertical-align: middle;
		}
	}

	.list {
		margin: 0 32rpx;
		background-color: #fff;
		box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 27, 94, 0.1);
		border-radius: 16rpx;
	}

	.main {
		margin-bottom: 240rpx;
		padding-top: 14rpx;
		padding-bottom: 140rpx;

		.update {
			display: flex;
			align-items: center;
			width: calc(100% - 32rpx);

			text {
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				flex: 1;
				text-align: left;
			}
		}

		.userInfo {
			display: flex;
			flex-direction: column;
			justify-content: center;

			.username {
				font-size: 28rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 40rpx;
				margin-bottom: 6rpx;
			}

			.tag {
				width: 128rpx;
				height: 32rpx;
			}
		}

		.ad-img {
			height: 212rpx;
			background: rgba(236, 242, 254, 0.6);
			box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 57, 197, 0.1), 0rpx 4rpx 8rpx 0rpx rgba(0, 28, 82, 0.05);
			border-radius: 16rpx;
			border: 2rpx solid;
			margin: 32rpx 32rpx 40rpx;
			border-image: linear-gradient(137deg, rgba(233, 240, 255, 1), rgba(173, 201, 254, 1)) 2 2;
		}
	}
</style>